<template>
  <n-modal
    v-model:show="showModal"
    preset="card"
    :title="title"
    :show-icon="false"
    class="w-800px"
  >
    <!-- 创建和编辑区域 -->
    <mycard v-if="editType === 'add' || editType === 'edit'" class="p-2">
      <flexform
        ref="flexFormref"
        :formList="formList"
        :formValue="formValue"
      ></flexform>
    </mycard>
    <!-- 回显区域 -->
    <mycard v-if="editType === 'view'"> 查看 </mycard>

    <!-- 交互成功区域 -->
    <mycard v-if="editType === 'success'">
      <n-result status="success" title="成功" :description="resultText">
      </n-result>
    </mycard>
    <!-- 交互失败区域 -->
    <mycard v-if="editType === 'error'">
      <n-result status="error" title="错误" :description="resultText">
      </n-result>
    </mycard>
    <template #action>
      <div class="w-full flex justify-end items-center">
        <n-button class="mx-1" v-if="editType === 'error'" @click="getreturn"
          >返回</n-button
        >
        <n-button class="mx-1" @click="handleClose">关闭</n-button>
        <n-button
          class="mx-1"
          v-if="editType === 'add' || editType === 'edit'"
          type="primary"
          @click="handleSave"
          >确定</n-button
        >
      </div>
    </template>
  </n-modal>
</template>


<script setup name="Edit" lang="ts">
import { FormItemRule } from 'naive-ui'
import { useRoute, useRouter } from 'vue-router'
import { openAndClose } from '../../../hooks/useEdit'
import guiling from '../../../util/guiling'
const router = useRouter()
const route = useRoute()
const flexFormref = ref(null) // 表单组件
const formValue = ref({}) // 表单数据
const rules = ref({}) // 表单的校验规则
const parentoptions = ref([]) // 备选的父级数据
// 自定义重置组件的方法
const reset = () => {
  formValue.value = guiling(formValue.value)
}
// 自定义初始化需要执行的方法
const chushihua = (data: any,edittype:"add"|"edit"|"view"|"") => {
  if (data) {
    formValue.value = data
  }
  if(edittype!=="view") {
    gettreeDatefunc()
  }
}
// 从钩子中结构出需要的函数和属性
const {
  showModal,
  editType,
  resultText,
  init,
  handleClose,
  getsuccess,
  getfaild,
  title,
} = openAndClose(chushihua, reset)

// 数字校验
const checknum=(rule: FormItemRule,value: string)=>{
    const regx = /^[1-9]\d*$/
    if(!value){
        return true
    }else if(value.length > 10){
       return new Error('请输入长度10位以内正整数')
    }else if(!regx.test(value)){
        return new Error('请输入长度10位以内正整数')
    }else{
        return true
    }
}

// 表单配置
const formList = ref([
  {
    label: '会议室名称',
    key: 'name',
    type: 'input',
    rules: [
      {
        required: true,
        message: '请输入会议室名称',
        trigger: ['input', 'change', 'blur'],
      },
      {
        max: 200,
        min: 2,
        message: '请输入2-200为的字符',
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
  {
    label: '会议室地址',
    key: 'name',
    type: 'input',
    rules: [
      {
        required: true,
        message: '请输入会议室名称',
        trigger: ['input', 'change', 'blur'],
      },
      {
        max: 500,
        min: 2,
        message: '请输入2-500为的字符',
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
  {
    label: '音响设备',
    key: 'yinxiang',
    type: 'radio',
    rules: [
      {
        required: true,
        message: '请选择是否有音响设备',
        trigger: ['input', 'change', 'blur'],
      },
    ],
    options:[
        {label:"是",value:"1"},
        {label:"否",value:"2"},
    ],
  },
  {
    label: '投影设备',
    key: 'touying',
    type: 'radio',
    rules: [
      {
        required: true,
        message: '请选择是否有投影设备',
        trigger: ['input', 'change', 'blur'],
      },
    ],
     options:[
        {label:"是",value:"1"},
        {label:"否",value:"2"},
    ],
  },
  {
    label: '支持远程会议',
    key: 'yuancheng',
    type: 'radio',
    rules: [
      {
        required: true,
        message: '请选择是否能进行远程会议',
        trigger: ['input', 'change', 'blur'],
      },
    ],
     options:[
        {label:"是",value:"1"},
        {label:"否",value:"2"},
    ],
  },
  {
    label: '人数',
    key: 'num',
    type: 'input',
    rules: [
      {
        required: true,
        message: '请输入最大与会人数',
        trigger: ['input', 'change', 'blur'],
      },
      {
        validator: checknum,
        trigger: ['input', 'change', 'blur'],
      },
    ],
  },
])

// 点击确定
const handleSave = () => {
  if (formValue.value.id) {
    flexFormref.value.jiaoyan(updatefunc)
  } else {
    flexFormref.value.jiaoyan(createfunc)
  }
}

const createfunc = (data: any) => {
  console.log(data)
  getsuccess('创建成功')
}

const updatefunc = (data: any) => {
  console.log(data)
  getfaild('修改失败')
}

// 点击返回
const getreturn = () => {
  if (formValue.value.id) {
    editType.value = 'edit'
  } else {
    editType.value = 'add'
  }
  resultText.value = ''
}

// 获取菜单的属性数据
const gettreeDatefunc = () => {}

// 抛出属性和方法
defineExpose({ init, handleClose })
</script>

<style scoped>
</style>